var RepairDetail = function () {
  var template = /* html */ `
    <div class="repair-detail">
      <el-form label-width="auto" size="small">
        <el-form-item label="设备型号">
          <span>{{detail.machineModel}}</span>
        </el-form-item>
        <el-form-item label="设备编号">
          <span>{{detail.machineSerialNo}}</span>
        </el-form-item>
        <el-form-item label="报修人">
          <span>{{detail.custName}}</span>
        </el-form-item>
        <el-form-item label="报修人联系电话">
          <span>{{detail.custPhone}}</span>
        </el-form-item>
        <el-form-item label="报修人补充信息">
          <div class="repair-detail-remark">
            <div v-for="(remark,index) in remarkList" :key="'remark_'+index">
              <div>{{moment(remark.time).format('YYYY-MM-DD HH:mm:ss')}}</div>
              <div style="padding-left:5px">{{remark.remark}}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="用户故障部件">
          <span>{{detail.custBrokenPart}}</span>
        </el-form-item>
        <el-form-item label="用户故障描述">
          <div class="repair-detail-textarea">
            <show-textarea autosize readonly v-model="detail.custBrokenDescription"></show-textarea>
          </div>
        </el-form-item>
        <el-form-item label="用户故障图片">
          <imgs-upload readonly v-model="detail.custPhoto"></imgs-upload>
        </el-form-item>
        <el-form-item label="技工">
          <span>{{detail.workName}}</span>
        </el-form-item>
        <el-form-item label="技工主管">
          <span>{{detail.workManagerName}}</span>
        </el-form-item>
        <el-form-item label="技工故障部件">
          <span>{{detail.workBrokenPart}}</span>
        </el-form-item>
        <el-form-item label="技工故障描述">
          <div class="repair-detail-textarea">
            <show-textarea autosize readonly v-model="detail.workBrokenDescription"></show-textarea>
          </div>
        </el-form-item>
        <el-form-item label="技工解决方案">
          <div class="repair-detail-textarea">
            <show-textarea autosize readonly v-model="detail.workBrokenSolveWay"></show-textarea>
          </div>
        </el-form-item>
        <el-form-item label="用户评价">
          <span>{{detail.custEvaluation}}</span>
        </el-form-item>
        <el-form-item label="用户意见">
          <div class="repair-detail-textarea">
            <show-textarea autosize readonly v-model="detail.custOpinion"></show-textarea>
          </div>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    props: {
      detail: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        remarkList: this.getRepairRrmarkList()
      };
    },

    methods: {
      getRepairRrmarkList: function () {
        var remark = this.detail.remark;
        if (SysUtil.isEmpty(remark)) {
          return [];
        }

        var remarkList = JSON.parse(remark);
        return remarkList;
      }
    },

    components: {
      ImgsUpload: ImgsUpload,
      ShowTextarea: ShowTextarea
    },

    template: template
  };
}();
